import { useState } from 'react' // 添加 useState
import {Avatar, Button, Card, Dropdown, Popover, theme} from 'antd'
import { MoonOutlined, ThemeOutlined, SunOutlined } from '../extraIcons/index'
import './header.styl'
import { useSelector, useDispatch } from 'react-redux'
import { setDark } from '../../store/slices/theme'
import ThemeModal from '../themeModal'
import {goto} from "../../router/hisRouter"; // 导入 themeModal

function Header({ title, info }) {
    const [isModalOpen, setIsModalOpen] = useState(false) // 添加状态管理
    const token = theme.useToken().token || {};
    if (info) { info() }

    const dispatch = useDispatch()
    const { dark } = useSelector(state => state.theme)
    const items = [
        {
            key: '1',
            label: '系统设置',
        },
        {
            key: '2',
            label: '退出登录',
            onClick: () => {
                localStorage.removeItem('token');
                goto('/login')
            },
        },
    ]
    const darkChange = () => {
        return dark ?
            <Button icon={<SunOutlined />}
                    shape="circle"
                    onClick={() => dispatch(setDark(false))}>
            </Button> :
            <Button icon={<MoonOutlined />}
                    shape="circle"
                    onClick={() => dispatch(setDark(true))}>
            </Button>
    }

    return (
        <Card className="M-header overflow-hidden">
            <div className="header-wrapper">
                <div className="logo-con">测试管理系统</div>
                <div className="opt-con">
                    {darkChange()}
                    <Button
                        icon={<ThemeOutlined />}
                        shape="circle"
                        onClick={() => setIsModalOpen(true)} // 绑定点击事件
                    />
                </div>
                <div className='ml-2 cursor-pointer select-none'>

                        <Dropdown
                            menu={{
                                items,
                                selectable: true,
                                defaultSelectedKeys: ['3'],
                            }}
                            trigger={['click']}
                        >
                        <Avatar className='h-8 w-8' style={{ backgroundColor:token.colorPrimary , verticalAlign: 'middle' }} size="large">
                            {localStorage.getItem('userName')}
                        </Avatar>
                        </Dropdown>

                </div>
            </div>
            <ThemeModal
                open={isModalOpen}
                onClose={() => setIsModalOpen(false)} // 关闭弹窗
            />
        </Card>
    )
}

export default Header